<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<select id="select1" multiple size="4">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<script>
description('Tapping on listbox items should fire an input and a change event.');

function tapOption(select, index) {
    var itemHeight = Math.floor(select.offsetHeight / select.size);
    var border = 1;
    var y = border + index * itemHeight;

    select.focus();
    if (window.eventSender) {
        eventSender.gestureTap(select.offsetLeft + border, select.offsetTop + y - window.pageYOffset + itemHeight / 2);
    }
}

var select = document.getElementById('select1');
var changeEventCounter = 0;
var inputEventCounter = 0;

select.addEventListener('change', function () {
    changeEventCounter++;
}, false);

select.addEventListener('input', function () {
    inputEventCounter++;
}, false);

if (window.eventSender) {
    shouldBe('changeEventCounter', '0');
    shouldBe('inputEventCounter', '0');
    tapOption(select, 0);
    shouldBe('changeEventCounter', '1');
    shouldBe('inputEventCounter', '1');
}
</script>

</html>
